<template>
  <van-tabs v-model:active="active" :animated="true" offset-top="45" swipeable class="tabbars">

    <van-tab v-for="index in navList" :title="index.text" :key="index.id">
      <div class="custom-tabbar">
        <!-- 轮播 -->
        <HomeSwiper></HomeSwiper>

        <!--  视频 -->
        <HomeVideo></HomeVideo>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { Tab as vanTab, Tabs as vanTabs } from 'vant'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import HomeSwiper from '@/views/Home/components/home-swiper.vue'
import HomeVideo from '@/views/Home/components/home-video.vue';


const active = ref(0)

// 获取频道数据
interface INvaItem {
  text: string,
  id: string
}
const navList = ref<INvaItem[]>([])

onMounted(async () => {
  const res = await axios({
    url: '/navList',
    method: 'get'
  })
  navList.value = res.data.result
})






</script>
<style scoped lang="scss">
// .tabbars {
//   top: 45px;
//   position: absolute;
// }
// .van-tabs__nav {
//   overflow: hidden;
// }

.custom-tabbar {
  overflow: scroll;
  height: 80vh;
  margin-bottom: 40px;
}
</style>